{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/login.css">
        <script src="/static/js/jquery-3.2.1.js"></script>
    <style>
        .register_post_form{
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-5">

                    <form class="register_post_form" enctype="multipart/form-data">
                        {% csrf_token %}
                          <div class="form-group">
                            <label for="username">用户名</label>
                              {{ register_form.username }}<span class="reg_error" id="username_err">
                          </span>
                          </div>

                          <div class="form-group">
                            <label for="password1">密码</label>
                              {{ register_form.password1 }}
                          </div>

                        <div class="form-group">
                            <label for="password2">确认密码</label>
                            {{ register_form.password2 }}<span class="reg_error" id="password2_err"></span>
                          </div>

                        <div class="form-group">
                            <label for="email">邮箱</label>
                            {{ register_form.email }}<span class="reg_error" id="email_err"></span>
                          </div>

                         <div class="form-group avatar">
                            <label for="image">头像</label>
                            <img src="{% static 'img/fang.jpg' %}" alt="" id="image" class="av">
                             <input type="file" id="file_choose" class="av">
                             <span class="reg_error" id="file_error"></span>
                          </div>

                        <div class="form-group valid_code">
                            <label for="valid_code">验证码</label>
                            <div class="row">
                                <div class="col-md-6">
                                    {{ register_form.valid_code }}<span class="reg_error" id="valid_code_err"></span>
                                </div>

                                <div class="col-md-6">
                                    <img src="/captcha/" width="213" height="35" class="valid_img"><a class="refersh">刷新</a>
                                </div>
                            </div>
                          </div>

                        <p class="error company-tips" id="error_tips"></p>

                        <input type="button" value="提交" id="submit_btn" class="btn btn-success">

                        <input type="reset" style="display: none" id="reset_btn">

                    </form>

                </div>
        </div>
    </div>

</body>
    <script src="/static/js/login.js"></script>
    <script>

        $('#file_choose').change(function () {
            // 1. 找到已更换的图片路径
            var reader = new FileReader();

            // 2. 从input标签中找到上传的文件对象, [0]是找到DOM对象
            var upload_file = $(this)[0].files[0];

            // 3. 处理上传的图片路径
            upload_file_url = reader.readAsDataURL(upload_file);

            // 4. 给reader对象绑定load事件
            reader.onload=function () {
                // 5. 修改img的src路径
                $('#image')[0].src = this.result  // 取出result对象,里面包含图路径

            }});


        // 图片放大显示
        $('#file_choose').mouseover(function () {
            $('#image').addClass("big_pic")

        });

        // 移开则缩小图片
        $('#file_choose').mouseleave(function () {
            $('#image').removeClass("big_pic")

        });

        // 点击提交按钮
        $('#submit_btn').click(function () {
            alert(1)
            // 实例化formdata对象
            var form_data = new FormData();

            // 填充数据
            form_data.append('username', $('#id_username').val());
            form_data.append('password1', $('#id_password1').val());
            form_data.append('password2', $('#id_password2').val());
            form_data.append('file_choose', $('#file_choose')[0].files[0]);
            form_data.append('valid_code', $('#id_valid_code').val());
            form_data.append('email', $('#id_email').val());
            form_data.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val());

            if(typeof ($('#file_choose')[0].files[0]) == 'undefined'){
                alert('请上传文件');
                return
            }

            var file_type = $('#file_choose')[0].files[0].type;
            if (file_type != 'image/png' && file_type != 'image/jpg' && file_type != 'image/gif' &&
                file_type != 'image/jpeg'){
                alert('上传的不为图片类型');
                return
            }

            if($('#file_choose')[0].files[0].size>1048576){
                alert('上传文件过大');
                return
            }

            $.ajax({
                url: '/register/',
                type: 'post',
                data: form_data,
                processData:false,   // formData使用必带内容
                contentType:false ,
                success: function (data) {
                    if (data.status=='success'){
                        window.location='/login/'

                    }
                    else if(data.status == 'fail'){
                        console.log(data.form_error);
                        var err_dict = data.form_error;
                        console.log(err_dict.__all__[0]);
                        for(i in err_dict){

                            $('#'+i+'_err').text(err_dict[i][0])
                        }
                        if (err_dict.__all__){
                            $('#password2_err').text(err_dict.__all__[0])}
                    }
            }
            })
        })
    </script>

</html>
